<template>
  <el-menu default-active="1-4-1"
           background-color="#545c64"
           text-color="#fff"
           :collapse-transition="false"
           class="el-menu-vertical"
           router
           :collapse="isCollapse">
    <el-menu-item v-for="item in menuList" :key="item.index" :index="item.index" >
      <i class="fa fa-1x" :class="item.icon"></i>
      <span slot="title">{{item.title}}</span>
    </el-menu-item>
    <!--<el-menu-item index="/table">-->
      <!--<i class="fa fa-edit fa-1x"></i>-->
      <!--<span slot="title">报表信息</span>-->
    <!--</el-menu-item>-->
    <!--<el-menu-item index="/message">-->
      <!--<i class="fa fa-envelope"></i>-->
      <!--<span slot="title">留言信息</span>-->
    <!--</el-menu-item>-->
  </el-menu>
</template>

<script>
export default {
  props: {
    isCollapse: Boolean,
    user: Object
  },
  data: function() {
    return {
    };
  },
  computed: {
    menuList() {
      if (this.user && (this.user.username === 'admin' || this.user.root === 1)) {
        return [
          {
            icon: 'fa-user',
            title: '员工管理',
            index: '/user'
          },
          {
            icon: 'fa-edit',
            title: '报表信息',
            index: '/table'
          },
          {
            icon: 'fa-envelope',
            title: '留言信息',
            index: '/message'
          },
          {
            icon: 'fa-tags',
            title: '日志信息',
            index: '/logs'
          }
        ];
      } else {
        return [
          {
            icon: 'fa-edit',
            title: '报表信息',
            index: '/table'
          },
          {
            icon: 'fa-envelope',
            title: '留言信息',
            index: '/message'
          }
        ];
      }
    }
  },
  methods: {
  }
};
</script>
<style>
  .el-menu-vertical{
    height: 100%;
  }
  .el-menu--collapse {
    width: 100%;
  }
</style>
